<script setup>
import { ref } from 'vue'
import indexdata from '../../data/StageIndexData.json'
import chapterdata from '../../data/SimCombatEntranceData.json'
import jsonToMap from '../../j2m.js'
import { getText } from '../../store/txtstore.js'
import StageList from './StageList.vue'

const indexData = jsonToMap(indexdata.data)
const chapterData = jsonToMap(chapterdata.data)

const chapters = []
const chapterNums = indexData.get(4)[6]
for (const num of chapterNums) {
    const chapter = chapterData.get(num)
    chapters.push({
        title: getText(chapter[2][1]),
        group: num
    })
}
const detail = ref(false)
const group = ref(0)
function navigateList(event) {
    group.value = event.currentTarget.getAttribute('group')
    detail.value = !detail.value
}
</script>

<template>
    <main>
        <nav v-if="detail">
            <button @click="navigateList">返回</button>
        </nav>
        <StageList v-if="detail" :group="group" group-key="20" />
        <ul v-else>
            <li class="green" v-for="chapter of chapters" :group="chapter.group" @click="navigateList">
                {{ chapter.title }}
            </li>
        </ul>
    </main>
</template>

<style scoped>
li {
    cursor: pointer;
}
</style>